<template>
  <div class="goods">
    <!--返回键-->
    <van-nav-bar left-arrow :fixed="true" :z-index="9" :border="false" style="background-color:rgba(0,0,0,0);height: 50px;" @click-left="onClickLeft"/>
    <!--商品轮播图-->
    <van-swipe class="goods-swipe" :autoplay="3000">
      <van-swipe-item v-for="(pic, i) in item.itemPic.split('###')" :key="i" @click="onPreview(i)">
        <img :src="pic" >
      </van-swipe-item>
    </van-swipe>
    <!--图片预览-->
    <van-image-preview v-model="showPreview" :images="item.itemPic.split('###')" @change="onChange">
      <p slot="index">第{{ index + 1 }}页</p>
    </van-image-preview>
    <!--商品基本信息-->
    <van-cell-group>
      <van-cell>
        <div class="goods-title">{{ item.itemName }}</div>
        <div class="goods-price">{{ formatPrice(item.salePrice) }}</div>
        <div class="goods-title">{{ item.description }}</div>
      </van-cell>
      <van-cell class="goods-express">
        <van-col span="10">运费：{{ '免运费' }}</van-col>
        <van-col span="10">剩余：{{ item.itemNum }}</van-col>
        <van-col span="4" v-if="item.itemCategory === '1'"><van-button type="info" size="mini" style="margin-left: 10px;" @click="queryMachinePart">查看配件</van-button></van-col>
      </van-cell>
    </van-cell-group>
    <!--分割线-->
    <van-divider v-if="technologyPicList.length!==0" :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 5px' }">商品工艺图展示</van-divider>
    <!--工艺图-->
    <ImageList v-if="technologyPicList.length!==0" :data="technologyPicList" :gutterNum="0" :columnNum="2" style="margin-bottom: 56px;"/>
    <!--商品规格选择弹框-->
    <van-sku v-model="show" :sku="sku" :goods="goodList" :goods-id="goodsId" :quota="quota" :hide-stock="sku.hide_stock" :initial-sku="initialSku"
             reset-stepper-on-hide :price-tag="priceTag" reset-selected-sku-on-hide @sku-selected="onSkuSelected" @add-cart="onAddCart" @buy-clicked="onBuyClicked"/>
    <!--footer-->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" @click="onChatClicked">
        客服
      </van-goods-action-icon>
      <van-goods-action-icon icon="cart-o" @click="onClickCart">
        购物车
      </van-goods-action-icon>
      <van-goods-action-button type="warning" @click="showChooseItem">
        加入购物车
      </van-goods-action-button>
      <van-goods-action-button type="danger" @click="showChooseItem">
        立即购买
      </van-goods-action-button>
    </van-goods-action>
  </div>
</template>

<script>
import ImageList from '@/components/ImageList'
export default {
  name: 'detail',
  components: {
    ImageList
  },
  data () {
    return {
      item: { // 商品属性初始化，为解决页面加载时，商品图片、名称等属性还未加载导致的报错问题
        itemName: '',
        salePrice: '',
        itemNum: '',
        itemPic: ''
      },
      technologyPicList: [], // 商品工艺图片列表
      showPreview: false, // 图片预览弹框显示标志位
      index: 0, // 当前预览图片索引
      show: false, // 商品规格选择弹框显示标志位
      initialSku: {}, // 页面加载时，默认选中的 sku
      initialSkuId: '', // 页面加载时，默认选中的 skuId
      goodsId: '', // 当前选中的商品id
      priceTag: '新品', // 当前选中的商品的标签
      quota: 0, // 限购数，0 表示不限购
      sku: { // sku属性初始化，为解决页面加载时，sku 属性还未加载导致的报错问题
        tree: [{
          k: '', // skuKeyName：规格类目名称
          v: [
            {
              id: '', // skuValueId：规格值 id
              name: '', // skuValueName：规格值名称
              imgUrl: '' // 规格类目图片，只有第一个规格类目可以定义图片
            },
            {
              id: '',
              name: '',
              imgUrl: ''
            }
          ]
        }],
        hide_stock: false
      },
      goodList: {
        // 商品标题
        title: '',
        // 默认商品 sku 缩略图
        picture: ''
      }
    }
  },
  methods: {
    /**
     * 图片预览
     */
    onPreview (index) {
      this.index = index
      this.showPreview = true
    },
    /**
     * 图片预览滑动事件
     */
    onChange (index) {
      this.index = index
    },
    /**
     * 根据商品id查询商品信息
     */
    getItemByItemId (itemId) {
      const self = this
      const param = { itemId: itemId }
      self.axios.get('api/shop/getItemByItemId', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          self.item = resp.data.data
          // 商品工艺图片列表赋值
          if (resp.data.data.technologyPic !== null && resp.data.data.technologyPic !== '') {
            self.technologyPicList = resp.data.data.technologyPic.split('###')
          }
          // 商品规格弹框中，商品title赋值
          self.goodList.title = resp.data.data.itemName
          // 商品规格弹框中，商品默认缩略图赋值
          self.goodList.picture = resp.data.data.itemPic.split('###')[0]
          // 根据商品类别和名称查询商品列表
          self.getItemListByCategoryAndName(resp.data.data.itemCategory, resp.data.data.itemName)
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    /**
     * 根据商品类别和名称查询商品列表
     * itemCategory 商品类别 1:设备 2：配件
     * itemName 商品名称
     * accurate 1:精确查询 0：模糊查询
     */
    getItemListByCategoryAndName (itemCategory, itemName) {
      const self = this
      const param = { itemCategory: itemCategory, itemName: itemName, accurate: '1' }
      self.axios.get('api/shop/getItemListByCategoryAndName', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          let sku = {}
          let treeList = [] // 【规格类目对象列表】：用来存储规格类目对象
          let treeObj = {} // 【规格类目对象】：如颜色、尺码、规格
          let singleGgList = [] // 【规格类目对象中属性值】：用来存储规格类目对象属性
          let combList = [] // 【所有规格类目组合列表】：用来存储规格类目组合对象
          resp.data.data.forEach((item, i) => {
            // 【规格类目对象属性】如颜色类目对象：红、黄、蓝
            let ggObj = {}
            ggObj.id = item.id // 【属性id】skuValueId：此处取值商品 id
            ggObj.name = item.itemGg // 【属性名称】商品规格
            ggObj.imgUrl = item.itemPic.split('###')[0] // 【属性图片】
            singleGgList.push(ggObj)
            // 【规格类目组合对象】
            let combObj = {}
            combObj.id = i // 【id】
            combObj.price = item.salePrice * 100 // 【价格】单位分，所以要乘100
            combObj.s1 = item.id // 【规格类目 k_s 为 s1 的对应规格类目对象属性 id】
            combObj.s2 = '0' // s1、s2、s3 对应 3 个规格类目的 k_s
            combObj.s3 = '0' // 为 0 表示不存在该规格
            combObj.stock_num = item.itemNum // 当前 sku 组合对应的库存
            combList.push(combObj)
          })
          treeObj.k = '规格' // 【规格类目对象名称】skuKeyName
          treeObj.v = singleGgList // 【规格类目对象中属性值】红、黄、蓝
          treeObj.k_s = 's1' // 【sku 组合列表】skuKeyStr：sku.list 中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          treeList.push(treeObj)
          sku.tree = treeList
          sku.list = combList
          sku.none_sku = false // 是否无规格商品
          sku.collection_id = '' // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
          sku.hide_stock = false // 是否隐藏剩余库存
          sku.messages = [
            // {
            //   datetime: '0', // 备注类型为 time 时，是否含日期。'1' 表示包含
            //   multiple: '1', // 备注类型为 text 时，是否多行文本。'1' 表示多行
            //   name: '备注', // 备注名称
            //   type: 'text', // 备注类型，可选: id_no（身份证）, text, tel, date, time, email
            //   required: '0', // 是否必填 '1' 表示必填
            //   placeholder: '若有其他需要，请填写备注' // 可选值，占位文本
            // }
          ]
          this.sku = sku
          this.initialSku = { // 页面加载时，默认选中当前的 sku
            s1: this.initialSkuId
          }
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    /**
     * 返回
     */
    onClickLeft () {
      this.$router.go(-1)
    },
    /**
     * 价格格式化
     */
    formatPrice (price) {
      return '¥' + (price * 100 / 100).toFixed(2)
    },
    /**
     * 跳转配件查询页面
     */
    queryMachinePart () {
      this.$router.push({ name: 'category', query: { itemCategory: '2' } })
    },
    /**
     * 显示商品规格选择弹框
     */
    showChooseItem () {
      // 将选中的商品id还原为页面加载时的商品id
      this.goodsId = this.initialSkuId
      this.show = true
    },
    /**
     * 客服按钮事件
     */
    onChatClicked () {
      this.$toast('如有问题请至公众号处提问，谢谢谅解~')
    },
    /**
     * 跳转至购物车页面
     */
    onClickCart () {
      this.$router.push('cart')
    },
    /**
     * 规格类目对象属性值切换
     */
    onSkuSelected (data) {
      if (data.selectedSku.s1 === '') {
        this.sku.hide_stock = true
        this.priceTag = ''
      } else {
        this.sku.hide_stock = false
        this.priceTag = '新品'
        // 给当前选中的商品id赋值
        this.goodsId = data.skuValue.id
      }
    },
    /**
     * 加入购物车
     * @param skuData
     */
    onAddCart (skuData) {
      let stockNum = skuData.selectedSkuComb.stock_num
      if (stockNum === 0) {
        this.$toast('该商品已售罄~')
      } else {
        const self = this
        const param = { openId: self.$store.state.openId, itemId: skuData.goodsId, buyNum: skuData.selectedNum }
        self.axios.post('api/shop/addItemToCart', param).then(resp => {
          if (resp.data.code !== '-1') {
            this.$toast('添加成功！请至购物车查看~')
            this.show = false
          } else {
            self.$toast(resp.data.msg)
          }
        }).catch(error => {
          console.log(error)
        })
      }
    },
    /**
     * 立即购买
     * payType 结算类型 1：购物车结算 2：直接结算
     */
    onBuyClicked (skuData) {
      let stockNum = skuData.selectedSkuComb.stock_num
      if (stockNum === 0) {
        this.$toast('该商品已售罄~')
      } else {
        this.$router.push({
          name: 'orderConfirm',
          query: { itemId: skuData.goodsId, payType: '2', buyNum: skuData.selectedNum }
        })
      }
    }
  },
  mounted () {
    const self = this
    // 获取商品id
    let itemId = self.$route.query.itemId
    // 页面初始化，选中当前的规格类目id（此处类目id取得商品id）
    self.initialSkuId = itemId
    // 当前选中的商品id
    self.goodsId = itemId
    // 根据商品id查询商品信息
    self.getItemByItemId(itemId)
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar .van-icon {
  color: #1989fa;
}

.van-nav-bar__left {
  left: 0.1rem;
}

.van-nav-bar__arrow {
  min-width: 1em;
  font-size: 0.8rem;
}

.goods {
  background-color: white;
  padding-bottom: 50px;
  &-swipe {
    img {
      width: 100%;
      display: block;
    }
  }
  &-title {
    font-size: 14px;
  }
  &-price {
    color: #f44;
  }
  &-express {
    color: #999;
    font-size: 12px;
    padding: 5px 15px;
  }
  &-cell-group {
    margin: 15px 0;
    .van-cell__value {
      color: #999;
    }
  }
  &-tag {
    margin-left: 5px;
  }
}

.van-sku-container {
  text-align: left;
  max-height: max-content;
  overflow-y: visible;
  font-size: 0.37333rem;
  background: #fff;
}
</style>
